{% extends "vdnapp/vdn_base.html" %}
{% load static from staticfiles %}
{% block page_css %}
        <style>
        .landing-page section p {
            color: #171111 !important;
            font-size: 14px !important;
        }
        .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px; height: 0; overflow: hidden;
        }

        .video-container iframe,
        .video-container object,
        .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
    </style>
{% endblock %}
{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">

    </div>
</div>
</section>
<section class="content bg-white">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="box box-primary">
                <div class="box-header with-border text-center">
                    <h2>Visual Data Network</h2>
                    <h2>publish & import data into <a target="_blank" href="https://www.deepvideoanalytics.com">Deep Video Analytics</a></h2>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-lg-6 col-md-6">
                            <div style="margin:15px 15px 15px 15px">
                            </div>
                            <div class="text-center" style="margin-bottom:10px;margin-top:15px">
                                <img class="img-responsive" style="margin: 0 auto;" src={% static 'dist/img/VDN.png' %}>
                                <a class="btn btn-primary" style="margin-top:10px" target="_blank" href="https://github.com/akshayubhat/DeepVideoAnalytics"><i class="fa fa-github"></i> VDN server is Open Source</a>
                            </div>

                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="video-container">
                                <iframe width="853" height="480" src="https://www.youtube.com/embed/Vt5qsNQoUB4?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">

                <div class="box box-primary m-t" style="margin-top:25px">
                <div class="box-header with-border text-center">
                    <h1>Available datasets</h1>
                </div>
                <div class="box-body text-center">
                <table class="table table-bordered dataTables-dict">
                <thead>
                <tr>
                    <th class="text-center">Name</th>
                    <th class="text-center">Root</th>
                    <th class="text-center">Parent</th>
                    <th class="text-center">User / Organization</th>
                    <th class="text-center">AWS Requester pays region/bucket/key or Direct Download url</th>
                    <th class="text-center">View details</th>
                </tr>
                </thead>
                <tbody>
                {% for v in dataset_list %}

                    <tr>
                        <td>{{ v.name }} </td>
                        <td>{{ v.root }} </td>
                        <td>{% if not v.root %}<a href="{{ v.parent_url }}" target="_blank">parent</a>{% endif %}</td>
                        <td>{{ v.organization.user.username }} at {{ v.organization.name }} </td>
                        <td>{% if v.aws_requester_pays %}{{ v.aws_region }} / {{ v.aws_bucket }} / {{ v.aws_key }}{% else %}<a href="{{ v.download_url }}">Direct download</a>{% endif %}</td>
                        <td class="text-center"><a href="/vdn/api/datasets/{{ v.pk }}">View details</a></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
                </div>
                </div>
                <div class="box box-primary m-t" style="margin-top:25px">
                <div class="box-header with-border text-center">
                    <h1>Available detectors</h1>
                </div>
                <div class="box-body text-center">
                <table class="table table-bordered dataTables-dict">
                <thead>
                <tr>
                    <th class="text-center">Name</th>
                    <th class="text-center">User / Organization</th>
                    <th class="text-center">AWS Requester pays region/bucket/key or Direct Download url</th>
                    <th class="text-center">View details</th>
                </tr>
                </thead>
                <tbody>
                {% for v in detector_list %}
                    <tr>
                        <td>{{ v.name }} </td>
                        <td>{{ v.organization.user.username }} at {{ v.organization.name }} </td>
                        <td>{% if v.aws_requester_pays %}{{ v.aws_region }} / {{ v.aws_bucket }} / {{ v.aws_key }}{% else %}<a href="{{ v.download_url }}">Direct download</a>{% endif %}</td>
                        <td class="text-center"><a href="/vdn/api/detectors/{{ v.pk }}">View details</a></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
                </div>
                </div>

        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
